{% extends "base.html" %}
{% load i18n %}

{% block title %} {{collection.name}} - Mr. Edu {%endblock%}

{% block section%}
	
	<p id="breadCrumbs">
		<a href="/mrEdu/{{userRole}}/collections">{% trans "[BREADCRUMB] My folders" %}</a>
		<span class="hidden">&gt;</span>
		<span class="itemName">{{collection.name}}</span>
	</p>
	
	<h1>{{collection.name}}
		{% if contents or formData.tags != '' or formData.filter != 'all' or formData.filter != 'recent' or formData.filter != 'oldest' %}
		<form class="toolbar" id="filter" action="/mrEdu/{{userRole}}/collection/{{collection.id}}/" method="post">
			<label class="toolbar">{% trans "[LABEL] Show" %}:
				<select name="filterType" onchange="return applyFilter()">
					{% if formData.filter == 'all' %}
					<option value="all" selected="selected">{% trans "[FILTER] All" %}</option>
					{% else %}
					<option value="all">{% trans "[FILTER] All" %}</option>
					{% endif %}
					
					{% if formData.filter == 'recent' %}
					<option value="recent" selected="selected">{% trans "[FILTER] Most recent" %}</option>
					{% else %}
					<option value="recent">{% trans "[FILTER] Most recent" %}</option>
					{% endif %}
					
					{% if formData.filter == 'oldest' %}
					<option value="oldest" selected="selected">{% trans "[FILTER] Oldest" %}</option>
					{% else %}
					<option value="oldest">{% trans "[FILTER] Oldest" %}</option>
					{% endif %}
					
					{% if formData.filter == 'audio' %}
					<option value="audio" selected="selected">{% trans "[FILTER] Audio" %}</option>
					{% else %}
					<option value="audio">{% trans "[FILTER] Audio" %}</option>
					{% endif %}
					
					{% if formData.filter == 'photo' %}
					<option value="photo" selected="selected">{% trans "[FILTER] Image" %}</option>
					{% else %}
					<option value="photo">{% trans "[FILTER] Image" %}</option>
					{% endif %}
					
					{% if formData.filter == 'text' %}
					<option value="text" selected="selected">{% trans "[FILTER] Text" %}</option>
					{% else %}
					<option value="text">{% trans "[FILTER] Text" %}</option>
					{% endif %}
					
					{% if formData.filter == 'video' %}
					<option value="video" selected="selected">{% trans "[FILTER] Video" %}</option>
					{% else %}
					<option value="video">{% trans "[FILTER] Video" %}</option>
					{% endif %}
				</select>
			</label>
			<label class="toolbar">{% trans "[LABEL] Filter by tags" %}:
				<input type="text" name="filterTags" id="filterTags" value="{{ formData.tags }}">
			</label>
			<!-- TODO: ACCESSIBLITY CHECK -->
			{% csrf_token %}
		</form>
		{% endif %}
	</h1>
	
	{% if feedback%}
	<div id="feedback">
		{% for item in feedback %}
			{{item|safe}}
		{% endfor %}
	</div>
	{% endif %}
	
	{% if contents %}
	<ul class="multimediaItems">
		{% for item in contents %}
		<li>
			<a href="/mrEdu/{{userRole}}/content/{{item.id}}">
				{% if item.type == 'image/jpeg' %}
				<img class="thumb" src="/static/uploads/{{item.resource}}" width="128" height="128" alt="{{item.description}}">
				<span class="image">Image</span>
				{% endif %}
				{% if item.type == 'video/ogg' %}
				<img class="thumb" src="/static/uploads/default/video-thumb.png" width="128" height="128" alt="{{item.description}}">
				<span class="video">Video</span>
				{% endif %}
				{% if 'audio' in item.type %}
				<img class="thumb" src="/static/uploads/default/audio-thumb.png" width="128" height="128" alt="{{item.description}}">
				<span class="audio">Audio</span>
				{% endif %}
				{% if item.type == 'text/plain' %}
				<img class="thumb" src="/static/uploads/default/text-thumb.png" width="128" height="128" alt="{{item.description}}">
				<span class="text">Text</span>
				{% endif %}
				<span class="itemName">
				{% if item.name|length > 12 %}
				{% for l in item.name|make_list|slice:":12" %}{{l}}{% endfor %} ...
				{% else %}
				{{item.name}}
				{% endif%}
				</span>
			</a>
		</li>
		{% endfor %}
	</ul>
	{% else %}
		{% if formData.tags != '' or formData.filter != 'all' %}
	<div id="feedback"><p class="message">{% trans "[MESSAGE] Sorry, no content has the tags or the type you are looking for." %} <span class="button right"><a href="/mrEdu/{{userRole}}/collection/{{collection.id}}/">{% trans "[MESSAGE] Back" %}</a></span></p></div>
		{% else %}
	<div id="feedback"><p class="message">{% trans "[MESSAGE] You didn't upload any content yet." %} <a href="/mrEdu/{{userRole}}/content/upload">{% trans "[MESSAGE] Upload your content" %}</a> {% trans "[MESSAGE] and enjoy!" %}</p></div>
		{% endif %}
	{% endif %}
{%endblock%}

{% block script%}
	<script type="text/javascript">
		function applyFilter()
			{
				$('#filter').submit();	
				return false;
			}
	</script>
{% endblock %}